<template>
    <div class="gnerv-login">
        <div class="gnerv-login-info">
            <div class="gnerv-login-msg">

            </div>
            <div class="gnerv-login-form">
                <el-form style="margin: 0 auto; width: 300px" :model="loginForm">
                    <el-form-item>
                        <el-input ref="account" v-model="loginForm.account" type="text" placeholder="account"
                                  @keyup.enter.native="handleLogin"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-input v-model="loginForm.password" type="password" placeholder="password"
                                  @keyup.enter.native="handleLogin"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button style="width: 100%" type="primary" @click="handleLogin"
                                   @keyup.enter.native="handleLogin">登录
                        </el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</template>

<script>

  import {userLogin} from "../../api/manage/login"

  import router from '../../router'
  import MessageUtils from "../../utils/MessageUtils";

  export default {
    name: "Login",
    data () {
      return {
        loginForm: {
          account: 'admin',
          password: '123456'
        },
        newLoginForm: {},
        kaptchaUrl: ""
      }
    },
    methods: {
      handleLogin () {
        userLogin(this.loginForm).then(response => {
          if (response.code == 200) {
            router.push({path: '/'})
          }else {
            MessageUtils.showMsg("登录失败！")
          }
        }).catch(error => {
          console.log(error)
        })
      }
    },
    created () {
      this.$nextTick(function () {
        this.$refs.account.focus()
      })
    }
  }
</script>

<style scoped>
    .gnerv-login {
        width: 100%;
        height: 100%;
    }

    .gnerv-login-info {
        margin: 0 auto;
        position: relative;
        top: 230px;
        width: 700px;
        height: 450px;
        border: #ffffff solid 1px;
        background-color: #2c3e50;
    }

    .gnerv-login-msg {
        display: block;
        width: 350px;
        height: 450px;
        float: left;
        background-image: url("~@/assets/login-logo.jpg");
        float: left;
    }

    .gnerv-login-form {
        margin: 0 auto;
        padding-top: 100px;
        width: 350px;
        height: 450px;
        float: left;
    }

    @media screen and (max-width: 900px) {
        .gnerv-login-info {
            position: relative;
            top: 0;
        }
    }
    /* 配置了涉猎器宽度不大于901px时 abc 显现200px宽度 */

    @media screen and (max-width: 500px) {
        .gnerv-login-info {
            width: 350px;
            position: relative;
            top: 0;
        }
        .gnerv-login-msg {
            display: none;
        }
    }

</style>